<template>
  <div class="shopping">
    <!-- 头部 -->
    <div class="content-main">
      <div class="top">
        <van-icon
          name="arrow-left"
          color="#fff"
          @click="$router.push('/')"
          size="1.5em"
        />
      </div>
      <ul>
        <li>
          <div class="img">
            <img :src="baseUrl + shoper.image_path" alt="" />
          </div>
          <div class="right" @click="$router.push('/merchant')">
            <div class="header">
              <h2>{{ shoper.name }}</h2>
            </div>
            <div>
              <div class="twoRight">
                <span>商家配送 /</span>
                <span
                  >{{
                    shoper.delivery_mode ? shoper.delivery_mode.text : ""
                  }}
                  /</span
                >
                <span>{{
                  shoper.piecewise_agent_fee
                    ? shoper.piecewise_agent_fee.tips
                    : ""
                }}</span>
              </div>
              <div class="twoLeft">
                <van-icon name="arrow" size="1.1em" color="#666" />
              </div>
            </div>
            <div>
              <h5>
                公告: <span>{{ shoper.promotion_info }}</span>
              </h5>
            </div>
          </div>
        </li>
      </ul>
      <div class="foot">
        <div class="left">
          <span class="red">减</span> 满30减5,满60减8(app专享)
        </div>
        <div class="right">
          1个活动 <van-icon name="arrow" size="1em" color="#666" />
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="main">
      <!-- 商品评价组件 -->
      <van-tabs v-model="active" color="#268ae6" title-active-color="#268ae6">
        <van-tab title="商品">
          <!-- 侧边导航 -->
          <div class="content_main">
            <div class="left">
              <li
                :class="{ corrent: corrent === index }"
                @click="changeFn(index)"
                v-for="(item, index) in menuList"
                :key="item.id"
              >
                <a :href="'#' + item.id">{{ item.description }}</a>
                <div class="left_top">12</div>
              </li>
            </div>
            <div class="main_right">
              <ul v-for="(arr,arrIndex) in menuList" :key="arr.id">
                <div class="main_top">
                  <h3 :id="arr.id">{{ arr.description }}</h3>
                  <span class="top_right">...</span>
                </div>
                <li v-for="(item, index) in arr.foods" :key="index">
                  <div class="img" @click="goDetails(item)">
                    <img :src="baseUrl + item.image_path" alt="" />
                  </div>
                  <div class="right">
                    <div class="header">{{ item.name }}</div>
                    <div class="two">
                      <span>{{ item.tips }}</span>
                      <!-- 弹窗 -->
    <van-dialog @confirm="buyFn(menuList[menuIndex].foods[foodsIndex].name)" v-model="cartshow" :title="menuList[menuIndex]&&menuList[menuIndex].foods[foodsIndex].name" :overlayStyle="{color:'#ccc'}" confirmButtonColor='#3199e8' confirmButtonText='加入购物车' width='200px' :showCancelButton='false' show-cancel-button>
  <h3>规格</h3>
    <div class="button"><p :class="{brue:brueIndex===index}" @click="clsFn(index)" v-for="(i,index) in menuList[menuIndex]&&menuList[menuIndex].foods&&menuList[menuIndex].foods[foodsIndex]&&menuList[menuIndex].foods[foodsIndex].specfoods" :key="i.item_id">{{i.name}} ￥{{i.price}}</p> </div>
</van-dialog>
                    </div>
                    <div class="three">
                      <div class="threeLeft"><span>￥</span>{{item.specfoods[0].price}}</div>
                      <div class="threeRight">
                        <div class="show" v-if="item.specfoods.length === 1" >
                          <span class="jian" @click="jianFn(arrIndex,index)" v-if="item.specfoods[0].original_price!=0">-</span> 
                          <span v-if="item.specfoods[0].original_price!=0">{{item.specfoods[0].original_price}}</span>
                        <span class="jia" @click="jiaFn(arrIndex,index)">+</span>
                        </div>
                        <div class="guige" v-else @click="guigeFn(arrIndex,index)">选规格</div>
                        
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 购物车 -->
    <div class="cart">
      <div class="left">
        <h2 :class="{buu:shopcount>0}">
          <span class="number" v-if="shopcount>0">{{shopcount}}</span
          ><van-icon name="shopping-cart-o" color="#fff" />
        </h2>
        <div class="content" >
          <div class="top"><span>$ </span>{{priceList}}</div>
          <div class="foot">配送费 $<span>5</span>元</div>
        </div>
      </div>
      <div class="right" v-if="priceList>=20">去结算</div>
      <div class="right coc" v-else>还差{{priceList==0?20:20-priceList}}起送</div>
    </div>
        </van-tab>
        <van-tab title="评价">
         <div class="pingjia">
           <div class="top" >
           <div class="top_left">
             <div class="left_top">4.7</div>
             <div class="left_content">综合评价</div>
             <div class="left_last">高于周边商家76.9%</div>
           </div>
           <div class="top_right">
             <div class="right_top">服务态度 <van-rate v-model="value" allow-half color="#ff990a" void-icon="star" :size="14" void-color="#fe9604" /><span> 4.7</span></div>
             <div class="right_centent">菜品评价 <van-rate v-model="value" allow-half void-icon="star" color="#ff990a" :size="14" void-color="#fe9604" /><span> 4.8</span></div>
             <div class="right_last">送达时间 <span>分钟</span></div>
           </div>
         </div>
         <div class="content">
           <!-- 标签 -->
           <div class="content_top">
             <van-tag v-for="(item,index) in tagsList" :key="index" @click="colorFn(index)"  :class="{corrent:curindex==index}" size="large">{{item.name}}({{item.count}})</van-tag>
         
           </div>
           <div class="content_last">
             <div class="user" v-for="(item,index) in ratingList" :key="index">
               <div class="user_left">
                 <div class="img">
                   <img :src="item.avatar?item.avatar:''" alt="">
                 </div>
               </div>
               <div class="user_main">
                 <div class="user_name">{{item.username}}</div>
                 <div class="pinfen"><van-rate v-model="item.rating_star" allow-half color="#ff990a" void-icon="star" :size="14" void-color="#fe9604" />{{item.time_spent_desc}}</div>
                 <span class="imgs" v-for="arr in item.item_ratings" :key="arr._id"><img  :src="arr.image_hash" alt=""></span>
                 <div class="bq"><van-tag color="#b8b8b8" size="medium" plain>超级..</van-tag></div>
               </div>
               <div class="user_right"><span>{{item.rated_at}}</span></div>
             </div>
           </div>
           </div>
         </div>
        </van-tab>
      </van-tabs>
    </div>
    
    
  </div>
</template>

<script>
import { menu, restaurantAll, ratings, tags } from "../api/index";
export default {
  data() {
    return {
      value: 5,
      active: 0,
      activeKey: 0,
      menuList: [],
      baseUrl: "//elm.cangdu.org/img/",
      corrent: 0,
      shoper: {}, //商家信息
      ratingList:[],  //评论列表
      tagsList:[],    //标签列表
      shopmenu:0,
      show:false,
      cartshow:false,
      menuIndex:-1,    //对应下标
      foodsIndex:-1,
      brueIndex:0,     //规格下标
      priceList:0,    //所有价格
      countArr:[],       //数量
      shopcount:0,
      curindex:0,
    };
  },
  methods: {
    colorFn(index){
      this.curindex=index
    },
    //跳转到详情
    goDetails(obj){
      console.log(192,obj);
      this.$router.push({
        path:'/shopDetails',
        query:{
          obj
        }
      })
    },
    //规格点击
    clsFn(index){
      console.log(190,index);
      this.brueIndex=index
    },

    //弹窗确认点击事件
    buyFn(name){
      console.log(185,name);

    },
    changeFn(index) {
      this.corrent = index;
    },
    //减
    jianFn(bigIndex,index){
      this.menuList[bigIndex].foods[index].specfoods[0].original_price--
      // let num =this.menuList[bigIndex].foods[index].specfoods[0].original_price * this.menuList[bigIndex].foods[index].specfoods[0].price
      this.priceList-=this.menuList[bigIndex].foods[index].specfoods[0].price
      localStorage.setItem('price',JSON.stringify(this.priceList))

      this.shopcount--
      localStorage.setItem('shopcount',this.shopcount)
      //本地存储
      let number=this.menuList[bigIndex].foods[index].specfoods[0].original_price
      let restaurant_id=this.menuList[bigIndex].restaurant_id
      // this.countArr.forEach((item,i)=>{
      //   if(item.bigIndex===bigIndex&&item.index===index){
      //     this.countArr[i]={bigIndex:bigIndex,index:index,num:number}
      //   }else{
      //     this.countArr.push({bigIndex:bigIndex,index:index,num:number})
      //   }
      // })
      
      if(localStorage.getItem('count')){
        this.countArr=JSON.parse(localStorage.getItem('count'))
      }

      this.countArr.push({restaurant_id:restaurant_id,bigIndex:bigIndex,index:index,num:number})
      console.log(224,this.countArr);
      localStorage.setItem('count',JSON.stringify(this.countArr))
    },
    //加
    jiaFn(bigIndex,index){
      console.log(208,bigIndex,index);
      this.menuList[bigIndex].foods[index].specfoods[0].original_price++
      // let num =this.menuList[bigIndex].foods[index].specfoods[0].original_price * this.menuList[bigIndex].foods[index].specfoods[0].price
      this.priceList+=this.menuList[bigIndex].foods[index].specfoods[0].price
      localStorage.setItem('price',JSON.stringify(this.priceList))
      this.shopcount++
      localStorage.setItem('shopcount',JSON.stringify(this.shopcount))
      //本地存储
      let number=this.menuList[bigIndex].foods[index].specfoods[0].original_price
      let restaurant_id=this.menuList[0].restaurant_id
      console.log(218,restaurant_id);
      // this.countArr.forEach((item,i)=>{
      //   if(item.bigIndex===bigIndex&&item.index===index){
      //     this.countArr[i]={bigIndex:bigIndex,index:index,num:number}
      //     return
      //   }else{
             
      //   }
      // })
      if(localStorage.getItem('count')){
        this.countArr=JSON.parse(localStorage.getItem('count'))
      }


     this.countArr.push({restaurant_id:restaurant_id,bigIndex:bigIndex,index:index,num:number})
      localStorage.setItem('count',JSON.stringify(this.countArr))
    },
    //点规格事件
    guigeFn(arrIndex,index){
      console.log(202,arrIndex,index);
       this.menuIndex=-1
      this.foodsIndex=-1

      this.menuIndex=arrIndex
      this.foodsIndex=index
      this.cartshow=true
    },
    showPopup(){
      this.cartshow=true
    }
  },
  created() {
    menu({ restaurant_id: this.$route.query.id }).then((res) => {
      console.log(187,res);
      this.menuList = res.data;

        //本地存储读取
    if(localStorage.getItem('count')){
      let newArr=JSON.parse(localStorage.getItem('count'))

      newArr.forEach(item=>{
        if(item.restaurant_id!=this.menuList[0].restaurant_id){
          console.log(275,item.restaurant_id);
          return
        }

        this.menuList[item.bigIndex].foods[item.index].specfoods[0].original_price=item.num
      })
    }

    });
    //总价
    if(localStorage.getItem('price')){
      this.priceList=JSON.parse(localStorage.getItem('price'))
    }

    //数量
    if(localStorage.getItem('shopcount')){
      this.shopcount=JSON.parse(localStorage.getItem('shopcount'))
    }

    restaurantAll(this.$route.query.id).then((res) => {
      this.shoper = res.data;
    });
    //评论列表
    ratings(this.$route.query.id).then(res=>{
      console.log(316,res);
      this.ratingList=res.data

      this.ratingList.forEach(item=>{
          if (item.avatar) {
            item.avatar = item.avatar.split("");
            item.avatar.splice(3, 0, "/");
            item.avatar.splice(1, 0, "/");
            item.avatar = item.avatar.join("");
            item.avatar =
              "https://fuss10.elemecdn.com/" + item.avatar + ".jpeg";
          }


          item.item_ratings.forEach((val) => {
            if (val.image_hash) {
              val.image_hash = val.image_hash.split("");
              val.image_hash.splice(3, 0, "/");
              val.image_hash.splice(1, 0, "/");
              val.image_hash = val.image_hash.join("");
              val.image_hash =
                "https://fuss10.elemecdn.com/" + val.image_hash + ".jpeg";
            }
          });
      })
    })
    tags(this.$route.query.id).then(res=>{
      this.tagsList=res.data
    })

  
  }
};
</script>

<style lang="less" scoped>
.left_top{
  display: none;
        font-size: 12px;
        background-color: red;
        line-height: 15px;
        color: #fff;
        border-radius: 8px;
        width: 15px;
        height: 15px;
        position: relative;
        right: -68px;
        top: -62px;
      }
.shopping{
  background-color: #fff;
}
.van-dialog{
  top:38%;
  left:33%
}
/deep/.van-overlay{
  background-color: rgba(204, 204, 204, 0.05);
}
.van-dialog{
  padding: 10px;
  h3{
    color: #8a8a8a;
    font-size: 16px;
  }
  .brue{
    border: 1px solid #3199e8;
    color: #3199e8;
  }
  .price{
    color: #fd6c14;
  }
}
.button{
  display: flex;
  p {
    border: 1px solid #ececec;
    margin: 5px;
    line-height: 30px;
    color:#949494;
    text-align: center;
    border-radius:4px;
    font-size: 20px; 
  };
}
.content-main {
  .top {
    position: fixed;
  }
  .foot {
    margin-top: -10px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .red {
      background-color: #ef7273;
      text-align: center;
      font-size: 12px;
    }
  }
  height: 125px;
  background-color: #413d4e;
  padding: 0 10px;
  border: 10px solid #767181;
  ul {
    height: 110px;
    li {
      .img {
        width: 80px;
        img {
          width: 100%;
        }
      }
      padding-top: 5px;
      display: flex;
      height: 100%;
      .right {
        height: 100%;
        width: 80%;
        .header {
          h2 {
            font-size: 24px;
            color: #fff;
          }
        }
        > div {
          height: 25%;
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
        }
        h5 {
          color: #fff;
        }
        i {
          font-size: 14px;
          color: #fff;
          line-height: 30px;
        }
        .twoRight {
          line-height: 30px;
          height: 30px;
          font-size: 16px;
          span {
            font-size: 14px;
            color: #fff;
          }
        }
        .twoLeft {
          line-height: 30px;
          .blue {
            background-color: #308fe8;
            color: #fff;
            font-size: 12px;
          }
          .write {
            font-size: 12px;
            color: #308fe8;
            border: 1px solid #308fe8;
            line-height: 33.33%;
          }
        }
        .threeLeft {
          font-size: 12px;
          line-height: 30px;
        }
        .threeRight{
          font-size: 12px;
          line-height: 40px;
          .bue {
            color: #308fe8;
          }
          span {
            color: #b1b1b0;
          }
        }
      }
    }
  }
}
.content_main {
  /deep/.van-tabs {
    border: 1px solid #000;
  }
  display: flex;
  margin-top: 10px;
  .main_top {
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    background-color: #f5f5f5;
    .top_right {
      color: #ccc;
      font-size: 30px;
      line-height: 36px;
    }
  }
  .main_right {
    width: 80%;
    .header {
      font-size: 22px;
      line-height: 30px;
    }
    .two {
      font-size: 14px;
      margin: 15px 0 2px;
    }
    .threeRight {
      display: flex;
      .guige{
        background-color: #3190e8;
        color: #fff;
        height: 20px;
        width: 38px;
        text-align: center;
        line-height: 20px;
        border-radius: 5px;
        font-size: 12px;
      }
    }
    .show{
      display: flex;
    }
    .three {
      .jian {
        display: block;
        width: 20px;
        line-height: 16px;
        color: #3190e8;
        text-align: center;
        height: 20px;
        border: 1px solid #3190e8;
        font-size: 32px;
        border-radius: 10px;
      }
      span {
        font-size: 20px;
        line-height: 22px;
        margin: 0 5px;
      }
      .jia {
        display: block;
        width: 20px;
        line-height: 20px;
        color: #fff;
        background-color: #3190e8;
        text-align: center;
        height: 20px;
        font-size: 26px;
        border-radius: 10px;
      }
    }
    li {
      .img {
        width: 80px;
        img {
          width: 100%;
        }
      }
      padding-top: 5px;
      display: flex;
      height: 100%;
      .right {
        height: 100%;
        width: 100%;
        padding: 0 10px;
        > div {
          height: 33.33%;
          display: flex;
          justify-content: space-between;
        }
        h5 {
          .pin {
            background-color: #ffdb36;
            font-size: 12px;
          }
        }
        i {
          font-size: 12px;
          color: #c0c3ca;
          line-height: 30px;
        }
        .twoRight {
          line-height: 30px;
          height: 30px;
          font-size: 16px;
          .yellow {
            color: #fe980a;
            font-size: 16px;
          }
          span {
            font-size: 14px;
            color: #a3a398;
          }
        }
        .twoLeft {
          line-height: 30px;
          .blue {
            background-color: #308fe8;
            color: #fff;
            font-size: 12px;
          }
          .write {
            font-size: 12px;
            color: #308fe8;
            border: 1px solid #308fe8;
            line-height: 33.33%;
          }
        }
        .threeLeft {
          font-size: 12px;
          line-height: 30px;
        }
        .threeRight {
          font-size: 12px;
          line-height: 40px;
          .bue {
            color: #308fe8;
          }
        }
      }
    }
  }
  .left {
    height: 100%;
    border-top: 1px solid #f8f8f8;
    top: 145px;
    left: 0;
    li {
      list-style: none;
      height: 60px;
      line-height: 60px;
      padding: 0, 10px;
      width: 80px;
      border-bottom: 1px solid #f8f8f8;
      a {
        display: block;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        color: #666;
      }
    }
    .corrent {
      border-left: 2px solid #298ce7;
    }
  }
}
.cart {
  width: 100%;
  height: 49.9992px;
  background-color: #3d3d3f;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  .left {
    width: 70%;
    display: flex;
    .buu{
      background-color: #3190e8;
    }
    h2 {
      width: 40px;
      height: 40px;
      border-radius: 25.0008px;
      background-color: #3d3d3f;
      line-height: 40px;
      text-align: center;
      font-size: 38px;
      position: relative;
      top: -25px;
      left: 30px;
      border: 5px solid #444444;
      .number {
        position: absolute;
        top: -4px;
        left: 36px;
        display: block;
        font-size: 10px;
        line-height: 12px;
        width: 12px;
        color: #fff;
        text-align: center;
        background-color: red;
        border-radius: 6px;
        border: 1px solid red;
      }
    }
    .content {
      color: #fff;
      margin-left: 50px;
      line-height: 30px;
      .top {
        font-size: 20px;
        line-height: 20px;
      }
      .foot {
        font-size: 14px;
      }
    }
  }
  .right {
    flex: 1;
    background-color: #4cd964;
    line-height: 50px;
    font-size: 24px;
    text-align: center;
    color: #fff;
  }
  .coc{
    flex: 1;
    background-color: #535356;
    line-height: 50px;
    font-size: 24px;
    text-align: center;
    color: #fff;
  }
}
//评价
.pingjia {
  margin-top: 10px;
  .top {
    display: flex;
    height: 100px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 12px solid #f5f5f5;
    .top_left {
      width: 40%;
      height: 100%;
      > div {
        text-align: center;
      }
      .left_top {
        margin-top: 10px;
        font-size: 28px;
        color: #ff6600;
        line-height: 45px;
      }
      .left_last {
        font-size: 12px;
        line-height: 16px;
        color: #a9a9a9;
      }
    }
    .top_right {
      width: 60%;
      height: 100%;
      .right_top {
        line-height: 33px;
        span {
          color: #fe9604;
        }
      }
      .right_centent {
        line-height: 33px;
        span {
          color: #fe9604;
        }
      }
      .right_last {
        line-height: 33px;
        span {
          font-size: 14px;
          color: #b2b2b2;
        }
      }
    }
  }
}
.content {
  .content_top {
    height: 200px;
    border-bottom: 1px solid #f5f5f5;
    .van-tag {
      margin: 5px;
      color: #000;
      background-color: #ebf5ff;
      height: 30px;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
    }
    .corrent {
      color: #fff;
      background-color: #3190e8;
    }
  }
}
.content_last {
  .user {
    padding: 8px;
    display: flex;
    height: 150px;
    border-bottom: 1px solid #fafafa;
    overflow: hidden;
    .user_left {
      width: 16%;
      height: 100%;
      .img {
        width: 42px;
        height: 42px;
        border-radius: 21px;
        margin: 10px auto;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .user_main {
      width: 62%;
      height: 100%;

      .imgs {
        width: 80px;
        img {
          width: 80%;
        }
      }
      .bq {
        margin: 3px;
      }
    }
    .user_right {
      flex: 1;
      height: 100%;
      font-size: 12px;
      padding-right: 5px;
      span {
        float: right;
      }
    }
  }
}
</style>